<template>
    <div class="contion">
        <div class="login">
            <h1>管理员登录</h1>
            <p>账号：<el-input v-model="name" placeholder="请输入用户名" style="width:240px"/></p>
            <p>密码：<el-input v-model="password" placeholder="请输入密码" style="width:240px"/></p>
            <el-button type="primary" @click="login">登录</el-button>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../http';
import { ElMessage } from 'element-plus';
const router = useRouter();

const name = ref('');
const password = ref('');

const login = () =>{
    http.post('/alogin/',{
        name:name.value,
        password:password.value
    }).then(res=>{
        if(res.data.code==200){
            ElMessage.success(res.data.msg)
            localStorage.setItem('adminid',res.data.data.id)
            localStorage.setItem('adtoken',res.data.token)
            router.push('/admin')
        }else{
            ElMessage.error(res.data.msg)
        }
    })
    
}
</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h1{
    margin-left: 90px;
}

.login{
    width: 380px;
    height: 300px;
    padding-left: 50px;
    margin-top: 50px;
}

button{
    width: 240px;
    margin-top: 50px;
    margin-left: 50px;
}
</style>